<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.min.js"></script>
</head>
<style>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter,
    .fade-leave-to

    /* .fade-leave-active below version 2.1.8 */
        {
        opacity: 0;
    }

    .slide-fade-enter-active {
        transition: all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter,
    .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

<body>
    <div id="app">
        <button @click="show=!show">toggle</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            show: false,
        }
    })












    // var arr = [1,2,3,4];
    // var brr = [5,6,7,8];
    // var crr = arr.concat();
    // console.log(crr);
    // console.log(arr===crr);

    // var crr = arr.map(function(item) {
    //     return item;
    // });
    // console.log(crr);
    // console.log(arr===crr);

    // var crr = arr.flat();
    // console.log(crr);
    // console.log(arr===crr);

    // var arr = ["电脑","手机"];
    // var str = JSON.stringify(arr);
    // console.log(str);
    // console.log(JSON.parse(str)===arr);

    // var url = "https://foo.com/?id=1&name=tom&x=2";
    // function GetQueryString(name) {
    //     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    //     console.log(reg);
    //     var r = url.match(reg);
    //     console.log(r);
    //     if (r != null)
    //         return r[2];
    //     return null;
    // }

    // console.log(GetQueryString("name"));


    // function getstr(name) {
    //     var str = url.split("?")[1].split("&");
    //     var obj = {};
    //     str.forEach((item) => {
    //         // var key = item.split("=")[0];
    //         // var val = item.split("=")[1];
    //         // obj[key] = val;
    //         obj[item.split("=")[0]] = item.split("=")[1];
    //     });
    //     // console.log(obj[name]);
    //     return obj[name];
    // }
    // console.log(getstr("id"));





</script>

</html>